<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form ref="modalForm" :model="dataSource" status-icon>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item v-if="modalType === 'edit'" label="供热信息编号" :label-width="formLabelWidth">
            <el-input v-model="dataSource.id" disabled autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="modalType === 'edit'" label="住户编号" :label-width="formLabelWidth">
            <el-input v-model="dataSource.householdCode" disabled autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="设备ID编号："
            prop="heatEquipmentId"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '设备ID编号不能为空',trigger:'blur,change'},
              { min: 3,max:10, message: 'ID长度在3-10个字符之间',trigger:'change'}
            ]"
          >
            <el-input v-model="dataSource.heatEquipmentId" placeholder="请输入设备ID编号" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="设备供热量："
            prop="heatEquipmentHeatingCapacity"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '设备供热量不能为空',trigger:'blur,change'}
            ]"
          >
            <el-input v-model="dataSource.heatEquipmentHeatingCapacity" placeholder="请输入设备供热量 例 20" autocomplete="off">
              <span slot="suffix">
                GJ/㎡
              </span>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="设备安装状态："
            prop="heatEquipmentSettingFlag"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '设备安装状态不能为空',trigger:'blur,change'}
            ]"
          >
            <el-radio-group v-model="dataSource.heatEquipmentSettingFlag" :value="dataSource.heatEquipmentSettingFlag">
              <el-radio
                v-for="item in equipmentSettingFlagList"
                :key="item.code"
                :label="item.code"
                :value="item.code"
              >
                {{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="设备阀门状态："
            prop="heatValveFlag"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '设备阀门状态不能为空',trigger:'blur,change'}
            ]"
          >
            <el-radio-group v-model="dataSource.heatValveFlag" :disabled="dataSource.heatEquipmentSettingFlag !== '1'" :value="dataSource.heatValveFlag">
              <el-radio
                v-for="item in valveFlagList"
                :key="item.code"
                :label="item.code"
                :value="item.code"
              >
                {{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="设备安装日期："
            prop="heatingBeginDate"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '设备安装日期不能为空',trigger:'blur,change'}
            ]"
          >
            <el-date-picker
              v-model="dataSource.heatingBeginDate"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="阀门实际变更时间："
            prop="heatValveFlagChangeTime"
            :label-width="formLabelWidth"
          >
            <el-input v-model="dataSource.heatValveFlagChangeTime" disabled autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="设备质量状态："
            prop="heatEquipmentStatus"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '设备质量状态不能为空',trigger:'blur,change'}
            ]"
          >
            <el-radio-group v-model="dataSource.heatEquipmentStatus" :value="dataSource.heatEquipmentStatus">
              <el-radio
                v-for="item in heatEquipmentStatus"
                :key="item.code"
                :label="item.code"
                :value="item.code"
              >
                {{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            v-if="modalType === 'edit'"
            label="住户可供热面积："
            prop="heatEquipmentSettingFlag"
            :label-width="formLabelWidth"
          >
            <el-input v-model="dataSource.heatArea" disabled autocomplete="off">
              <span slot="suffix">
                /㎡
              </span>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm('modalForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addOneHeatingInfo, modifyOneHeatingInfo } from '@/api/ht/xqzhgl/grxxgl/grxxgl'

const { Message } = require('element-ui')
export default {
  name: 'Modal',
  props: {
    heatingInfo: {
      type: Object,
      default: () => {
        return {
          id: '',
          householdCode: '',
          heatEquipmentId: '',
          heatEquipmentSettingFlag: '',
          heatValveFlag: '',
          heatValveFlagChangeTime: '',
          heatEquipmentStatus: '',
          heatEquipmentStatusChangeTime: '',
          heatEquipmentHeatingCapacity: '',
          heatArea: '',
          heatingBeginDate: ''
        }
      }
    },
    equipmentSettingFlagList: {
      type: Array,
      default: () => []
    },
    valveFlagList: {
      type: Array,
      default: () => []
    },
    heatEquipmentStatus: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: '供热&设备信息',
      formLabelWidth: '150px', // 表单输入框字段宽度
      dialogFormVisible: false, // 对话框是否显示
      modalType: 'add',
      dataSource: { // 数据源
      },
      departmentTypeArray: [] // 部门类型列表
    }
  },
  watch: {
    heatingInfo(newdata, prevdata) {
      this.dataSource = newdata
      this.title = '供热&设备信息'
    }
  },
  methods: {
    checkModelType(type) {
      this.modalType = type
      // 展示对话框
      this.dialogFormVisible = true
      // 判断是编辑还是新增
      if (type === 'add') {
        // 置空
        this.title = '供热&设备信息-新增'
        this.dataSource = {}
      }
    },
    handleConfirm(formName) {
      const type = this.modalType
      // 判断是编辑还是新增
      if (type === 'add') {
        // 调用新增请求
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addHeatingInfoHandle()
          } else {
            console.log('表单缺少数据或者不符合要求')
            return false
          }
        })
      } else {
        // 调用修改请求
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.modifyHeatingInfoHandle()
          } else {
            console.log('表单缺少数据或者不符合要求')
            return false
          }
        })
      }
    },
    addHeatingInfoHandle() {
      this.addHeatingInfo()
    },
    modifyHeatingInfoHandle() {
      this.modifyHeatingInfo()
    },
    async addHeatingInfo() {
      const res = await addOneHeatingInfo(this.dataSource)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async modifyHeatingInfo() {
      const res = await modifyOneHeatingInfo(this.dataSource)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    reflushDataHandle() {
      // 调用父组件获取方法刷新数据
      this.$emit('reflushDataHandle')
    }
  }
}
</script>

<style scoped>

</style>
